<template>
  <div>
    <p>商品清单如下:</p>
    <p v-for="(item, index) in goods" :key="index">
      {{ item.shopName }}--{{ item.price }}元一份
    </p>
    <p>请选择购买数量</p>
    <Goods
      @addfn="addfn"
      @subfn="subfn"
      :arr="item"
      :index="index"
      v-for="(item, index) in goods"
      :key="item.price"
    ></Goods>
    <p>总价为{{ p_price }}</p>
  </div>
</template>

<script>
import Goods from "./components/goods.vue";
export default {
  components: {
    Goods,
  },
  data() {
    return {
      goods: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  methods: {
    addfn(index) {
      this.goods[index].count++;
    },
    subfn(index) {
      if (this.goods[index].count == 0) {
        return;
      }
      this.goods[index].count--;
    },
  },
  computed: {
    p_price() {
      // 求和
      return this.goods.reduce(
        (sum, item) => (sum += item.count * item.price),
        0
      );
    },
  },
};
</script>

<style>
</style>